diff --git a/web/assets.js b/web/assets.js
index 0c78e8af4..b017c189f 100644
--- a/web/assets.js
+++ b/web/assets.js
@@ -1,31 +1,24 @@
 // @flow
 
 export const assetCacheURLPrefix = 'https://dh9fld3hutpxf.cloudfront.net';
 
-// Background Illustration
-export const backgroundIllustrationAsset = {
-  fileName: 'background-illustration.svg',
-  height: '100px',
-  width: '133px',
-};
-
 // Notifications Modal Illustration: "Focused"
 export const focusedNotificationsIllustrationAsset = {
   fileName: 'all-notifs.svg',
   height: '86px',
   width: '46px',
 };
 
 // Notifications Modal Illustration: "Focused (badge only)"
 export const badgeOnlyNotificationsIllustrationAsset = {
   fileName: 'badge-notifs.svg',
   height: '86px',
   width: '46px',
 };
 
 // Notifications Modal Illustration: "Background"
 export const backgroundNotificationsIllustrationAsset = {
   fileName: 'muted-notifs.svg',
   height: '86px',
   width: '46px',
 };
diff --git a/web/assets/background-illustration.react.js b/web/assets/background-illustration.react.js
new file mode 100644
index 000000000..cff77139e
--- /dev/null
+++ b/web/assets/background-illustration.react.js
@@ -0,0 +1,44 @@
+// @flow
+
+import * as React from 'react';
+
+function BackgroundIllustration(): React.Node {
+  return (
+    <svg
+      width={133}
+      height={100}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x={20.5}
+        y={32}
+        width={87}
+        height={67.522}
+        rx={5.194}
+        fill="#563894"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m63.116 63.61-33.54-31.226a1.317 1.317 0 0 1-.288-.384h-3.594a5.19 5.19 0 0 0-1.69.281c.175 1.4.822 2.778 2.032 3.904l33.54 31.227a6.492 6.492 0 0 0 8.848 0l33.541-31.227c1.209-1.126 1.856-2.503 2.032-3.904a5.187 5.187 0 0 0-1.691-.281h-3.593a1.322 1.322 0 0 1-.287.384L64.886 63.61a1.299 1.299 0 0 1-1.77 0Z"
+        fill="#331F5C"
+      />
+      <circle cx={99.5} cy={33} r={33} fill="#AE94DB" />
+      <path
+        d="M93.201 15.26a13.003 13.003 0 0 1 6.299-1.634c7.217 0 13.25 6.034 13.25 13.252 0 3.38.413 6.346.987 8.835M87.354 21.65a12.953 12.953 0 0 0-1.104 5.228c0 11.043-4.417 17.67-4.417 17.67h28.708M81.833 15.835l35.333 35.338"
+        stroke="#6D49AB"
+        strokeWidth={3.713}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M106.125 46.756a6.625 6.625 0 1 1-13.25 0"
+        stroke="#6D49AB"
+        strokeWidth={3.713}
+      />
+    </svg>
+  );
+}
+
+export default BackgroundIllustration;
diff --git a/web/chat/chat-thread-list.react.js b/web/chat/chat-thread-list.react.js
index 8c7000599..b2af2a791 100644
--- a/web/chat/chat-thread-list.react.js
+++ b/web/chat/chat-thread-list.react.js
@@ -1,80 +1,76 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { emptyItemText } from 'lib/shared/thread-utils';
 
-import { assetCacheURLPrefix, backgroundIllustrationAsset } from '../assets';
+import BackgroundIllustration from '../assets/background-illustration.react';
 import Button from '../components/button.react';
 import Search from '../components/search.react';
 import { useSelector } from '../redux/redux-utils';
 import { useOnClickNewThread } from '../selectors/nav-selectors';
 import ChatThreadListItem from './chat-thread-list-item.react';
 import css from './chat-thread-list.css';
 import { ThreadListContext } from './thread-list-provider';
 
 function ChatThreadList(): React.Node {
   const threadListContext = React.useContext(ThreadListContext);
   invariant(
     threadListContext,
     'threadListContext should be set in ChatThreadList',
   );
   const {
     activeTab,
     threadList,
     setSearchText,
     searchText,
   } = threadListContext;
 
   const onClickNewThread = useOnClickNewThread();
 
   const isThreadCreation = useSelector(
     state => state.navInfo.chatMode === 'create',
   );
 
   const isBackground = activeTab === 'Background';
 
   const threadComponents: React.Node[] = React.useMemo(() => {
     const threads = threadList.map(item => (
       <ChatThreadListItem item={item} key={item.threadInfo.id} />
     ));
     if (threads.length === 0 && isBackground) {
       threads.push(<EmptyItem key="emptyItem" />);
     }
     return threads;
   }, [threadList, isBackground]);
 
   return (
     <>
       <div className={css.threadListContainer}>
         <Search
           onChangeText={setSearchText}
           searchText={searchText}
           placeholder="Search chats"
         />
         <div>{threadComponents}</div>
       </div>
       <div className={css.createNewThread}>
         <Button disabled={isThreadCreation} onClick={onClickNewThread}>
           Create new chat
         </Button>
       </div>
     </>
   );
 }
 
 function EmptyItem() {
   return (
     <div className={css.emptyItemContainer}>
-      <img
-        src={`${assetCacheURLPrefix}/${backgroundIllustrationAsset.fileName}`}
-        height={backgroundIllustrationAsset.height}
-        width={backgroundIllustrationAsset.width}
-      />
+      <BackgroundIllustration />
       <div className={css.emptyItemText}>{emptyItemText}</div>
     </div>
   );
 }
 
 export default ChatThreadList;